<template>
	<view>
		<!-- 单选框 -->
		<view>
			<view class="title"><text>你的性别是？</text></view>
			<view class="cloose">
				<view class="uni-list questStyle">
					<label 
					class="uni-list-cell uni-list-cell-pd" 
					v-for="(item,index) in radioItems" 
					:key="index"
					@tap="selectedBtn(index)">
						<view>
							<label class="label-2-text" :for="item.name">
								<text>{{item.value}}</text>
							</label>
						</view>
						<view class="selected" v-if="isShowImg == index">
							<!-- <radio :id="item.name" :value="item.name" :checked="item.checked"></radio> -->
							<image src="/static/questSelect.png"></image>
						</view>
					</label>
				</view>
			</view>
		</view>
		<!-- 下拉框 -->
		<!-- <view>
			<view class="title"><text>你的年龄是？</text></view>
			<view class="cloose">
				
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 radioItems: [
					 {
						name: 'nan',
						value: '男生'
					},
					{
						name: 'nv',
						value: '女生',
						checked: 'true'
					}
				],
				isShowImg:null
			};
		},
		methods:{
			selectedBtn(index){
				if(this.isShowImg !== index){
					this.isShowImg = index
				}else{
					this.isShowImg = null
				}
			}
		}
	}
</script>

<style>
	.title{
		font-size: 32upx;
		margin-bottom: 42upx;
	}
	.questStyle .uni-list-cell{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border:2upx solid #000;
		height: 70upx;
		line-height: 70upx;
		border-radius: 10upx;
		margin-bottom: 26upx;
		padding:0 32upx 0 44upx;
		font-size: 32upx;
	}
	.selected{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.selected image{width:48upx;height: 48upx;}
	
</style>
